<!DOCTYPE html>
<html>
<head>
    <title>多功能图像生成器</title>
    <style>
        .container { max-width: 1000px; margin: 20px auto; padding: 20px; }
        .form-section { background: #f5f5f5; padding: 20px; border-radius: 8px; }
        .form-group { margin-bottom: 15px; }
        input[type="number"] { width: 80px; padding: 5px; margin-right: 10px; }
        .func-params { display: none; }
        .active { display: block; }
        #plot { max-width: 100%; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        .error { color: red; margin: 10px 0; }
    </style>
</head>
<body>
    <div class="container">
        <h1>多功能图像生成器</h1>
        <div class="form-section">
            <form method="POST">
                <div class="form-group">
                    <label>选择函数类型：</label>
                    <select id="funcType" name="func_type" required>
                        <option value="">请选择</option>
                        <option value="linear">一次函数</option>
                        <option value="quadratic">二次函数</option>
                        <option value="sin">正弦函数</option>
                        <option value="exp">指数函数</option>
                        <option value="log">对数函数</option>
                    </select>
                </div>

                <!-- 动态参数区域 -->
                <div id="linearParams" class="func-params">
                    <input type="number" name="linear_k" placeholder="斜率k" required>
                    <input type="number" name="linear_b" placeholder="截距b" required>
                </div>
                
                <div id="quadraticParams" class="func-params">
                    <input type="number" name="quadratic_a" placeholder="a" required>
                    <input type="number" name="quadratic_b" placeholder="b" required>
                    <input type="number" name="quadratic_c" placeholder="c" required>
                </div>
                
                <div id="sinParams" class="func-params">
                    <input type="number" name="sin_A" placeholder="振幅A" required>
                    <input type="number" name="sin_omega" placeholder="角频率ω" required>
                    <input type="number" name="sin_phi" placeholder="相位φ（度）" required>
                </div>
                
                <div id="expParams" class="func-params">
                    <input type="number" name="exp_a" placeholder="系数a" required>
                    <input type="number" name="exp_b" placeholder="指数b" required>
                </div>
                
                <div id="logParams" class="func-params">
                    <input type="number" name="log_a" placeholder="系数a" required>
                    <input type="number" name="log_base" placeholder="底数（>0≠1）" min="2" required>
                </div>

                <button type="submit">生成图像</button>
            </form>
        </div>

        {% if error %}
            <div class="error">错误：{{ error }}</div>
        {% endif %}

        {% if plot_url %}
            <h2>生成图像：</h2>
            <img id="plot" src="data:image/png;base64,{{ plot_url }}">
        {% endif %}
    </div>

    <script>
        document.getElementById('funcType').addEventListener('change', function() {
            // 隐藏所有参数区域
            document.querySelectorAll('.func-params').forEach(div => {
                div.style.display = 'none';
                div.querySelectorAll('input').forEach(input => {
                    input.disabled = true;
                    input.removeAttribute('required');
                });
            });

            // 显示当前选中类型的参数
            const activeDiv = document.getElementById(this.value + 'Params');
            if (activeDiv) {
                activeDiv.style.display = 'block';
                activeDiv.querySelectorAll('input').forEach(input => {
                    input.disabled = false;
                    input.setAttribute('required', 'required');
                });
            }
        });
    </script>
</body>
</html>